<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		<title>地图查询</title>
		<link rel="stylesheet" href="http://static.trmap.cn/arcgis/3.18/esri/css/esri.css">
		<link rel="stylesheet" href="lib/jsTree/themes/default/style.min.css" />
		<link rel="stylesheet" href="lib/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="lib/semantic/semantic.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/land.css">
		<script type="text/javascript">
			var dojoConfig = {
				parseOnLoad: true,
				async: false
			}
		</script>
	</head>

	<body>
		<div class="main">

			<div id="map" class="map"></div>

			<div class="searchPanel" v-show="showSearch" style="display: none;">
				<div class="searchBar">
					<!--删除class 'action'-->
					<div class="ui input">
						<input type="text" placeholder="地名路名搜索..." v-model="searchText" @keyup.13="doSearch">
						<div class="ui button small icon" style="height:30px;margin: 4px 0 0 -35px;background-color: white;" class="close icon" @click="closeSearch">
							<i class="esri-icon-close"></i>
						</div>
					</div>
				</div>
				<div class="searchResult" v-show="open" style="display:none;">
					<div class="resultType">
						<div class="statusmsg">
							<div v-show="state == 'A'" class="result-num">共{{searchCount}}条搜索结果</div>
							<div v-show="state == 'B'" class="result-num">共{{dl_searchCount}}条搜索结果</div>
						</div>
						<div class="statusbtn">
							<button @click="state='A'" v-bind:class="{basic: isPlaceBasic}" class="ui mini primary button">地名</button>
							<button @click="state='B'" v-bind:class="{basic: isRoadBasic}" class="ui mini primary button">道路</button>
						</div>
					</div>
					<div class="search_results" v-show="state == 'A'">
						<div class="resultList">
							<div class="ui middle aligned divided list">
								<div class="item" v-for="feature in featureSet" @click="location($event)" gid={{feature.attributes.OBJECTID}}>
									<div class="right floated content"><i class="angle right icon"></i></div>
									<div class="content">
										{{feature.attributes.NAME}}
									</div>

								</div>
							</div>
						</div>
					</div>
					<div class="search_results" v-show="state == 'B'">
						<div class="resultList">
							<div class="ui middle aligned divided list">
								<div class="item" v-for="feature in DLFeatures" @click="location($event)" gid={{feature.attributes.OBJECTID}}>
									<div class="right floated content"><i class="angle right icon"></i></div>
									<div class="content">
										{{feature.attributes.NAME}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="layerPanel layui-m-layer layui-m-layer0 layui-modal" v-show="showLayer" style="display: none;">
				<div class="layui-m-layermain">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-popover-arrow"></div>
							<div class="layui-m-layercont">
								<div id="basetree"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="projectPanel layui-m-layer layui-m-layer0 layui-modal" v-show="showProject" style="display: none;">
				<div class="layui-m-layermain">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-popover-arrow"></div>
							<div class="layui-m-layercont">
								<div id="projecttree"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="measurePanel layui-m-layer layui-m-layer0 layui-modal" v-show="showMeasure" style="display: none;">
				<div class="layui-m-layermain">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-popover-arrow"></div>
							<div class="layui-m-layercont">
								<div id="measureMain">
									<div class="ui basic buttons">
										<button class="ui red button" v-show="drawing" @click="drop">取消</button>
										<button class="ui button" v-bind:class="{active: isPointActive}" @click="drawPoint">点</button>
										<button class="ui button" v-bind:class="{active: isLineActive}" @click="drawLine">线</button>
										<button class="ui button" v-bind:class="{active: isPolygonActive}" @click="drawPolygon">面</button>
									</div><br>
									<div class="ui buttons" style="padding:6px 0 0;">
										<button class="ui button" disabled="{{measureIndex === 0}}" @click="prepage">后退</button>
										<button class="ui button" disabled="{{graphicCount === 0 ? true : measureIndex === graphicCount - 1}}" @click="nextpage">前进</button>
										<button class="ui icon button" @click="clean">清除</button>
									</div>
								</div>
								<div class="measureResult">
									<span v-show="target.type === 'polygon' && showResult" class="result-measure">
										所测量面积为{{target.areas}}公顷
									</span>
									<span v-show="target.type === 'line' && showResult" class="result-measure">
										所测量距离为{{target.lengths}}米
									</span>
									<span v-show="target.type === 'point' && showResult" class="result-measure">
										所定位坐标为({{target.lon}},{{target.lat}})
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="findPanel layui-m-layer layui-m-layer0 layui-modal" v-show="showFind" style="display: none;">
				<div class="layui-m-layermain">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-popover-arrow"></div>
							<div class="layui-m-layercont">
								<div class="findMain">
									<div class="ui grid">
										<div class="five wide column" style="text-align:right;padding-right:0;padding-top:1.4rem;">项目类型:</div>
										<div class="eleven wide column">
											<select id="projects" class="ui dropdown fluid">
												<option v-for="item in projects" value="{{item.text}}">{{item.text}}</option>
											</select>
										</div>
									</div>
									<div style="height: 10px;"></div>
									<div class="ui grid">
										<div class="five wide column" style="text-align:right;padding-right:0;padding-top:1.4rem;">
											查找字段:
										</div>
										<div class="eleven wide column">
											<select id="fields" class="ui dropdown fluid">
												<option v-for="item in fields" value="{{item.value}}">{{item.text}}</option>
											</select>
										</div>
									</div>
									<div style="height: 10px;"></div>
									<div class="ui grid">
										<div class="five wide column" style="text-align:right;padding-right:0;padding-top:1.4rem;">
											查找名称:
										</div>
										<div class="eleven wide column">
											<div class="ui input find-pj-name fluid">
												<input type="text" class="fluid" placeholder="" v-model="findText">
											</div>
										</div>
									</div>

									<div style="height: 10px;"></div>
									<div class="ui grid">
										<div class="eight wide column">
											<button class="ui fluid twitter button" @click="find"><i class="esri-icon-search"></i> 查询 </button>
										</div>
										<div class="eight wide column">
											<button class="ui fluid red button" @click="clean"><i class="icon-bitbucket-sign"></i> 清除 </button>
										</div>
									</div>

								</div>
								<div class="findResult" v-show="showResult" style="display: none;">
									<div class="ui middle aligned divided list">
										<div class="item" v-for="result in results" @click="location($event)" gid={{result.attributes.OBJECTID}}>
											<div class="right floated content"><i class="angle right icon"></i></div>
											<div class="content">{{result.attributes.XMMC}}</div>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="bookPanel layui-m-layer layui-m-layer0 layui-modal" v-show="showBook" style="display: none;">
				<div class="layui-m-layermain">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-popover-arrow"></div>
							<div class="layui-m-layercont">
								<label>书签名称</label>
								<div class="ui right labeled left icon input fluid">
									<i class="tags icon"></i>
									<input type="text" placeholder="保存当前地址" class="book-m-input" v-model="bookName">
									<a class="ui tag label blue" @click="addBookMark">添加</a>
								</div>
								<div class="ui middle aligned divided list">
									<div class="item" v-for="(index,mark) in bookArray">
										<div class="right floated content">
											<div class="ui button mini basic blue" @click="delete(index,mark.bookName)">删除</div>
										</div>
										<div class="content">
											<div @click="setExtent(mark.extent)" style="line-height:30px;">{{mark.bookName}}</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="loginPanel layui-m-layer layui-m-layer0 layui-modal" v-show="showLogin" style="display: none;">
				<div class="layui-m-layermain" v-show="state == 'LOGIN'">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="layui-m-layercont">
								<div class="ui labeled input">
									<div class="ui label">
										账号
									</div>
									<input type="text" placeholder="请输入登录账号" class="username" name="username">
								</div>
								<div class="ui labeled input">
									<div class="ui label">
										密码
									</div>
									<input type="password" placeholder="请输入登录密码" class="userpassword" name="userpassword">
								</div>
								<div class="ui labeled input">
									<div class="ui toggle checkbox">
										<input type="checkbox" name="public" class="userfinger">
										<label>开启指纹登录</label>
									</div>
								</div>
								<div class="ui grid">
									<div class="eight wide column">
										<button class="ui fluid button twitter" onclick="loginFunValid()">登录</button>
									</div>
									<div class="eight wide column">
										<button id="login_close" class="ui red fluid button">取消</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--
                	作者：jger.zq@qq.com
                	时间：2016-12-28
                	描述：预留的已登录面板，可以退出和显示当前登录人的状态
                -->
				<div class="layui-m-layermain" v-show="state == 'LOGINED'">
					<div class="layui-m-layersection">
						<div class="layui-m-layerchild layui-m-anim-scale">
							<div class="eight wide column fluid">
								<div class="ui grid">
									<button id="login_close" class="ui red fluid button" @click="logout">退出</button>
									<button id="login_close" class="ui fluid button" @click="close">取消</button>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<!--<div style="position: absolute;width: 100%;height: 100%;top: 0;z-index: 999;display: none;">
				<div>
					<button @click="show">关闭</button>
				</div>
				<embed src='http://27.17.26.116:8890/files/%E6%8C%87%E6%A0%87%E4%BD%93%E7%B3%BB.pdf' style='position: absolute;height: 90%;width: 100%;margin: 0;padding: 0;overflow: hidden;'></embed>
			</div>-->

			<div class="toolbar vertical-btn">
				<button class="mybtn" :class="searchClass" @click="search"><i class="esri-icon-search"></i></button>
				<button class="mybtn" :class="layerClass" @click="layer"><i class="esri-icon-layers"></i></button>
				<button class="mybtn" :class="measureClass" @click="measure"><i class="esri-icon-edit"></i></button>
				<button class="mybtn" :class="projectClass" @click="project"><i class="esri-icon-basemap"></i></button>
				<button class="mybtn" :class="findClass" @click="find"><i class="icon-tasks"></i></button>
				<button class="mybtn" :class="bookClass" @click="book"><i class="icon-bookmark-empty"></i></button>
				<!-- <button class="mybtn unselect" @click="position"><i class="esri-icon-navigation"></i></button> -->
			</div>
			<div class="positionMapIon">
				<button class="mybtn unselect" @click="toggleShow"><i class="esri-icon-navigation"></i></button>
			</div>
			<div class="systembar vertical-btn">
				<div class="">
					<button class="mybtn unselect" @click="show"><i class="esri-icon-user"></i></button>
					<button class="mybtn unselect" @click="help"><i class="icon-help unselect">?</i></button>
				</div>
			</div>

			<div class="mapSwitcher">
				<ul>
					<!--
						图片素材请自行替换和美化
                    -->
					<li><img src="img/vec.png" @click="showBaseLayer"></li>
					<li><img src="img/img.png" @click="showImageryLayer"></li>
				</ul>
			</div>
		</div>
		<!--
		<script type="text/javascript" src="cordova.js"></script>
		-->

		<script type="text/javascript" src="http://static.trmap.cn/arcgis/3.18/init.js"></script>
		<script type="text/javascript" src="lib/jquery.min.js"></script>
		<script type="text/javascript" src="lib/jsTree/jstree.min.js"></script>
		<script type="text/javascript" src="lib/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="lib/semantic/semantic.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>

</html>